<template>
  <div>
    <el-input :disabled="true" value="评论功能暂未开放"  type="textarea" :autosize="{ minRows: 4, maxRows: 4}" v-show="type===2"></el-input>
    <div v-show="!(hotComments.length === 0)">
      <div style="margin:20px 0 0 0;font-size:14px;font-weight:600">精彩评论</div>
      <div v-for="(items,i) in hotComments" :key='i' class="recommend_item">
        <img :src="items.user.avatarUrl" style="width:35px;height:35px;border-radius:50%;cursor:pointer" @click="GoProfile(items.user.userId)">
        <div style="display:flex;flex-direction:column;margin-left:15px">
          <span><span style="color:rgb(80,125,175);cursor:pointer" @click="GoProfile(items.user.userId)">{{items.user.nickname}} : </span><span>{{items.content}}</span></span>
          <span style="color:rgb(159,159,159);margin-top:5px">{{items.time | dataFormat}}</span>
        </div>
        <span style="position:absolute;right:0;bottom:20px;color:rgb(102,102,102);cursor:pointer" @click="dianZan(items.commentId,i,1)">
          <i class="iconfont icon-zan" v-if="!items.liked" style="font-size:13px"></i>
          <i v-else class="iconfont icon-zan" style="color:rgb(236,65,65);font-size:13px"></i>
          {{items.likedCount}}
        </span>
      </div>
      <div class="morecomment" v-show="ishasmore1" @click="moreComment">更多精彩评论></div>
    </div>
    <div style='padding-bottom:100px'>
      <div style="margin:20px 0 0 0;font-size:14px;font-weight:600">最新评论(<span>{{total | simpNum}}</span>)</div>
      <div v-for="(items,i) in newComments" :key='i' class="recommend_item">
        <img :src="items.user.avatarUrl" style="width:35px;height:35px;border-radius:50%;cursor:pointer" @click="GoProfile(items.user.userId)">
        <div style="display:flex;flex-direction:column;margin-left:15px">
          <span><span style="color:rgb(80,125,175);cursor:pointer" @click="GoProfile(items.user.userId)">{{items.user.nickname}} : </span><span>{{items.content}}</span></span>
          <span style="color:rgb(159,159,159);margin-top:5px">{{items.time | dataFormat}}</span>
        </div>
        <span style="position:absolute;right:0;bottom:20px;color:rgb(102,102,102);cursor:pointer" @click="dianZan(items.commentId,i,2)">
          <i class="iconfont icon-zan" v-if="!items.liked" style="font-size:13px"></i>
          <i v-else class="iconfont icon-zan" style="color:rgb(236,65,65);font-size:13px"></i>
          {{items.likedCount}}
        </span>
      </div>
      <div >
        <el-pagination
        class="de-pagination"
        @current-change="handleCurrentChange"
        :current-page="newquery.pageNo"
        layout="prev, pager, next"
        :total='total'
        :page-size='50'
        :hide-on-single-page="true"
        >
      </el-pagination>
      </div>
    </div>
  </div>
  
</template>

<script>
import {request} from 'network/request'
import {dataFormat,simpNum} from 'common/filter'
export default {
  name:'Comment',
  props:['type','id'],
  data(){
    return {
      ishasmore1:null,
      ishasmore2:null,
      hotComments:[],
      hotquery:{
        id:this.id,
        type:this.type,
        pageNo:1,
        pageSize:10,
        sortType:2,
      },
      newquery:{
        id:this.id,
        type:this.type,
        pageNo:1,
        pageSize:50,
        sortType:3,
        cursor:''
      },
      newComments:[],
      total:0,
      
    }
  },
  methods:{
    async getHotComment(){
      const data = await request('GET','comment/new',this.hotquery)
      this.ishasmore1 = data.data.hasMore
      this.hotComments = data.data.comments
    },
    async getNewComment(){
      const data = await request('GET','comment/new',this.newquery)
      this.ishasmore2 = data.data.hasMore
      this.newComments = data.data.comments
      this.total = data.data.totalCount
      this.newquery.cursor = data.data.cursor
      // console.log(data)
    },
    handleCurrentChange(newPage){
      this.newquery.pageNo = newPage
      this.getNewComment()
    },
    async dianZan(commentIds,i,index){
      let item = index === 1 ? this.hotComments[i] : this.newComments[i]
      if(item.liked === false){
        const data = await request('GET','comment/like',{id:this.id,cid:commentIds,t:1,type:this.type})
        if(data.code === 200){
          item.liked = true
          item.likedCount++
        }else{
          this.$message.error('出错了！')
        }
      }else{
        const data = await request('GET','comment/like',{id:this.id,cid:commentIds,t:0,type:this.type})
        if(data.code === 200){
          item.liked = false
          item.likedCount--
        }else{
          this.$message.error('出错了！')
        }
      }
    },
    moreComment(){
      this.$emit('pageChange')
      this.$router.push('/perfectcomment/' + this.hotquery.id +'/' + this.type)
    },
    GoProfile(id){
      this.$router.push('/profile/'+id)
    }
  },
  created(){
    if(this.id){
      this.getHotComment()
      this.getNewComment()
    }
  },
  filters:{
    dataFormat,
    simpNum
  },
  watch:{
    id:{
      handler(){
        this.hotquery.id = this.id
        this.newquery.id = this.id
        this.getHotComment()
        this.getNewComment()
      }
    }
  }
}
</script>

<style scoped>
  .recommend_item{
    padding: 20px 0;
    border-bottom: 1px solid rgb(242,242,242);
    font-size: 5px;
    display: flex;
    position: relative;
  }
  .morecomment{
    text-align-last: center;
    line-height: 29px;
    width: 100px;
    height: 29px;
    border: 1px solid rgb(216,216,216);
    border-radius: 30px;
    margin: 20px auto;
    padding: 0px 14px;
    font-size: 13px;
    cursor: pointer;
    color: rgb(55,55,55);
  }
  .morecomment:hover{
    color: #000;
  }
  .de-pagination{
    margin-top: 15px;
    text-align: center;
  }
  
</style>